// react
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  changeMember_id,
  changeOpenid,
  changeUser,
  phoneOpenid,
  storeMember_id,
} from "@/redux/userSlice";

// taro
import Taro, { useShareAppMessage } from "@tarojs/taro";
import { View } from "@tarojs/components";

// ui
import { Button, Checkbox, ConfigProvider, Dialog, Input, Radio, Toast } from "@nutui/nutui-react-taro";
import { Form } from "@nutui/nutui-react-taro";

// utils
import {
  ApiCheckLogin,
  ApiGetOpenId,
  ApiLogout,
  ApiRegister,
  ApiSendCaptcha,
} from "../../utils/api";
// css
import "./model.scss";

// node
// 解密
import WXBizDataCrypt from "../../../Node/WXBizDataCrypt";

// components
// 导入隐私
import PrivacyPolicy from "./PrivacyPolicy";
import config from "../../../config/wx";
import Keyboard from "./keyboard";

const userUi = () => {
  useShareAppMessage((res) => {
    if (res.from === "button") {
      // 来自页面内转发按钮
      console.log(res.target);
    }

    return {
      title: "东进会员",
      path: "pages/user/index", //?id=123
      // imageUrl: "../../assets/user.jpg",
      // imageUrl,
    };
  });
  // wx
  const [registerForm, SetRegisterForm] = useState({
    openid: Taro.getStorageSync("openid") || "",
    sessionKey: Taro.getStorageSync("sessionKey") || "",
  });
  useEffect(() => {
    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    Taro.getSetting({
      success: async (res) => {
        if (res.authSetting["scope.userInfo"]) {
          // 用户已经授权过，可以直接获取用户信息
          getUserInfo();
          // 获取openid
          getopenId();
        } else {
          // 用户未授权，需要弹出授权窗口
          showAuthModal();
        }
      },
    });
  }, []);

  // 授权窗口
  const showAuthModal = () => {
    Taro.showModal({
      title: "授权提示",
      content: "需要获取您的用户信息",
      confirmText: "去授权",
      cancelText: "取消",
      success: (res) => {
        if (res.confirm) {
          // 用户点击确认，打开授权设置页面
          openSetting();
        }
      },
    });
  };
  // 授权设置页面
  const openSetting = () => {
    // Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
    Taro.openSetting({
      success: (res) => {
        if (res.authSetting["scope.userInfo"]) {
          // 用户授权成功，可以获取用户信息
          getUserInfo();
        } else {
          // 用户拒绝授权，提示授权失败
          Taro.showToast({
            title: "授权失败",
            icon: "none",
          });
        }
      },
    });
  };
  // 获取用户信息
  const getUserInfo = () => {
    Taro.getUserInfo({
      success: (res) => {
        // const { encryptedData, iv，userInfo } = res;
        // 渲染用户信息
        deterName(res.userInfo);

        console.log(res.userInfo, "res.userInfo");
      },
    });
  };
  // 获取openid
  const getopenId = () => {
    console.log("获取openid");
    Taro.login({
      success(res) {
        if (res.code) {
          //发起网络请求
          console.log(res.code, "code");
          // 测试
          // const url = config.url(res.code);
          // Taro.request({
          //   // url:"https://api.weixin.qq.com/sns/jscode2session"
          //   url,
          //   success: (res) => {
          //     // console.log(res.data, "data");
          //     const myRegisterForm = {
          //       openid: res.data.openid,
          //       sessionKey: res.data.session_key,
          //     };
          //     SetRegisterForm(myRegisterForm);
          //     console.log(myRegisterForm, "myRegisterForm");
          //     //  存储新的加密令牌
          //     Taro.setStorageSync("openid", res.data.openid);
          //     Taro.setStorageSync("sessionKey", res.data.session_key);
          //     // 存到仓库
          //     dispatch(changeOpenid(res.data.openid));
          //     console.log(111);
          //     // loading结束
          //   },
          // });

          // 正式
          ApiGetOpenId(res.code).then((res) => {
            const { data } = res.data;
            const myRegisterForm = {
              openid: data.openid,
              sessionKey: data.session_key,
            };
            SetRegisterForm(myRegisterForm);
            console.log(myRegisterForm, "myRegisterForm");
            //  存储新的加密令牌
            Taro.setStorageSync("openid", data.openid);
            Taro.setStorageSync("sessionKey", data.session_key);
            // 存到仓库
            dispatch(changeOpenid(data.openid));
            console.log("getopenId");
            // loading结束
          });
        } else {
          console.log("登录失败！" + res.errMsg);
          // loading结束
        }
      },
    });
  };

  // 更新姓名性别
  const deterName = async (wxInfo: wxInfo) => {
    const { nickName, gender, avatarUrl } = wxInfo;
    // 渲染页面
    handleNameInputChange("name", nickName);
    handleNameInputChange("sex", gender == 0 ? 1 : 2);
    Taro.setStorageSync("img", avatarUrl);
  };

  // 表单控件
  const [form] = Form.useForm();

  // 导入模块 2.使用方法
  const dispatch = useDispatch();

  // 导入仓库 2.使用属性
  const storeMemberId = useSelector(storeMember_id);
  const myOpenid = useSelector(phoneOpenid);

  // ui提示
  const [state, SetState] = useState({
    msg: "toast",
    type: "text",
    cover: false,
    duration: 2,
    closeOnOverlayClick: false,
    icon: "",
    center: true,
  });
  const [showToast, SetShowToast] = useState(false);
  // const openToast = (
  //   type: string,
  //   msg: string,
  //   duration?: number,
  //   icon?: string
  // ) => {
  //   const changeState = Object.assign(state, {
  //     type,
  //     msg,
  //     duration,
  //     icon,
  //   });
  //   SetState(changeState);
  // };

  // 用户手机号等
  const [formData, setFormData] = useState({
    name: "",
    sex: -1,
    birthday: null,
    mobile: "",
    captcha: "",
    plate_number: "",
  });

  // 是否同意授权注册-----------
  const [isAgree, setIsAgree] = useState(false);
  // 是否勾选授权
  const [isEmpower, setIsEmpower] = useState(false);
  const handleRadioChange = () => {
    setIsEmpower(!isEmpower);
  };
  const agree = () => {
    setIsEmpower(true);
    setIsAgree(false);
  };
  const noAgree = () => {
    setIsAgree(false);
    setIsEmpower(false);
  };

  // 用于修改更新用户
  // 修改user对象属性值
  const handleFieldChange = <K extends keyof RootObject>(
    fieldName: K,
    value: RootObject[K]
  ) => {
    setFormData((prevData) => ({
      ...prevData,
      [fieldName]: value,
    }));
  };
  //  user对象里的属性名 属性值
  const handleNameInputChange = (
    type: keyof RootObject,
    value: RootObject[keyof RootObject]
  ) => {
    // console.log("type", type);
    handleFieldChange(type, value);
    // console.log("formData", formData);
  };

  // 手机号校验-----------
  const [phoneTip, setPhoneTip] = useState("");
  const [phoneStatus, setPhoneStatus] = useState(false);
  const [flag, setFlag] = useState(false);
  useEffect(() => {
    // console.log(22, formData.mobile, "mobile");
    valueRangeValidator(null, formData.mobile);
  }, [formData.mobile]);

  // 失去焦点
  const handleMobileBlur = async (e) => {
    let reg =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    let flag;
    if (reg.test(e)) {
      if (e !== formData.mobile) {
        handleNameInputChange("mobile", e);
        console.log(e, "mobile");
      }
      //  setIsMobileValid(true); // 设置手机号验证通过状态
      flag = true;
    } else {
      // setIsMobileValid(false); // 设置手机号验证通过状态
      flag = false;
    }
    return Promise.resolve(flag);
  };

  // 获取手机号
  const getPhoneNumber = (res) => {
    // console.log(registerForm, "this.registerForm.sessionKey");
    const aid = config.config.aid;
    console.log(config, "config");

    console.log(res.detail, aid, registerForm.sessionKey);
    if (!res.detail.encryptedData) {
      console.warn(res.errMsg);
      return;
    }
    var pc = new WXBizDataCrypt(aid, registerForm.sessionKey);
    var data = pc.decryptData(res.detail.encryptedData, res.detail.iv);
    handleNameInputChange("mobile", data.phoneNumber);
    phoneValidator(null, data.phoneNumber);
    // console.log("解密后 data:", data.phoneNumber);
  };
  // 校验手机号
  const phoneValidator = async (
    ruleCfg: any,
    value: string
  ): Promise<string | boolean> => {
    if (value) {
      // console.log(value, "phoneValidator");
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(value)) {
        if (value !== formData.mobile) {
          // console.log(value, "value");
          handleNameInputChange("mobile", value);
        }
        return true; // 空字符串表示验证通过
      }
      return false; // 空字符串表示验证通过
    } else {
      return false;
    }
  };

  // 函数校验
  const valueRangeValidator = (rule: any, value: string) => {
    let reg =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    console.log(reg.test(value), "valueRangeValidator");
    if (!flag) {
      setFlag(true);
      return;
    }
    if (reg.test(value)) {
      setPhoneStatus(false);
    } else if (value.length == 0) {
      setPhoneTip("手机号不能为空");
      setPhoneStatus(!reg.test(value));
    }
    // else if (value.length > 0 && value.length<11) {
    //   setPhoneTip("请输入11位数的手机号");
    //   setPhoneStatus(!reg.test(value));
    // }
    else {
      setPhoneTip("手机号无效");
      setPhoneStatus(!reg.test(value));
    }
    return true;
  };

  // 验证码-----------
  const [num, setNum] = useState(60);
  // 验证码发送
  const [sendCode, setSendCode] = useState(false); //验证码倒计时开关
  // const [isCodeSent, setIsCodeSent] = useState(false); //验证码是否发送
  // const [isMobileValid, setIsMobileValid] = useState(false); //手机号校验开关

  // 在组件中添加 ref
  const timerRef = useRef<number | null>(null);
  // 在 useEffect 中清除上一次的定时器
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []);

  // 获取验证码
  const handleSendCodeClick = async () => {
    //校验失败
    const flag = await handleMobileBlur(formData.mobile);
    if (!flag) {
      // form.submit();
      Taro.showToast({
        title: "手机号无效",
        icon: "error",
        duration: 2000,
      });
      return;
    }

    // 非空校验
    if (formData.mobile == "") {
      // Toast.show("test", { title: "未输入手机号", duration: 2 });
      Taro.showToast({
        title: "未输入手机号",
        icon: "error",
        duration: 2000,
      });
      return;
    }

    if (sendCode) {
      // 如果处于冷却状态，什么也不做
      console.log("冷却状态", sendCode);
      return;
    }
    // 清除上一次的定时器
    clearInterval(timerRef.current as number);

    try {
      console.log("点击发送");
      // 后续布置阿里云
      setSendCode(true);  
      const res = await ApiSendCaptcha(formData.mobile);
      console.log("发送成功");
      // form.resetFields();
      console.log("mobile:", formData.mobile);

      // 设置新的倒计时
      timerRef.current = window.setInterval(() => {
        setNum((prevNum) => {
          if (prevNum === 1) {
            clearInterval(timerRef.current as number);
            setSendCode(false);
            return num; // Reset the countdown
          }
          return prevNum - 1;
        });
      }, 1000);

      // 处理成功的情况
      if (res.code == 0) {
        // setIsCodeSent(true);
        Taro.showToast({
          title: "已发送",
          icon: "success",
          duration: 2000,
        });
      } else {
        Taro.showToast({
          title: res.msg || "发送失败",
          icon: "error",
          duration: 2000,
        });
      }
      console.log(res, "res");
    } catch (error) {
      console.log("发送失败");
      console.error(error, "error");
      // 处理失败的情况
      if (error.data.code) {
        console.log("真机调试2");
        Taro.showToast({
          title: error.data.msg || "失败",
          icon: "error",
          duration: 2000,
        });
      } else {
        console.log("其他报错", error);
        Taro.showToast({
          title: "出错了",
          icon: "error",
          duration: 2000,
        });
      }
    }
  };

  // 是否注册
  const isRegister = async () => {
    checkLogin();
    // await getUserInfo(UserToken.access_token, UserToken.openid);
  };
  // 请求登录状态
  const checkLogin = async () => {
    if (!myOpenid) {
      // 去到注册页
      console.error("没有openid");
      return;
    }
    console.log(myOpenid, "openid");
    let res;
    if (storeMemberId) {
      // res = await ApiCheckLogin(myOpenid, 1);
      // Toast.show("test", { title: "已注册", duration: 2 ,type:'success'});
      Taro.showToast({
        title: "已注册",
        icon: "success",
        duration: 2000,
      });
      Taro.reLaunch({
        url: "/pages/home/index",
      });
    } else {
      res = await ApiCheckLogin(myOpenid, 1);
    }
    // const res = await ApiCheckLogin(myOpenid);
    if (res.code == 0) {
      //  存到仓库
      dispatch(changeMember_id(res.data.member_id));
      // Toast.show("test", { title: "已注册", duration: 2, type: "success" });
      Taro.showToast({
        title: "已注册",
        icon: "success",
        duration: 2000,
      });
      Taro.reLaunch({
        url: "/pages/home/index",
      });
    } else if (res.code == 2001) {
      await ApiLogout();
      await checkLogin();
    } else {
      console.log("未注册");
    }
  };

  // 确定注册手机
  const determine = async () => {
    valueRangeValidator(null, formData.mobile);

    //校验失败
    const flag = await handleMobileBlur(formData.mobile);
    if (!flag) {
      // Toast.show("test", { title: "手机号无效", duration: 2, type: "fail" });
      Taro.showToast({
        title: "手机号无效",
        icon: "error",
        duration: 2000,
      });
      return;
    }

    // if (!isCodeSent) {
    //   // console.error("请先获取验证码");
    //   Taro.showToast({
    //     title: "请先获取验证码",
    //     icon: "error",
    //     duration: 2000,
    //   });
    //   // Toast.show("test", { title: "请先获取验证码", duration: 2 });
    //   return;
    // }
    if (formData.captcha == "") {
      // Toast.show("test", { title: "请先填写验证码", duration: 2 });
      Taro.showToast({
        title: "请先填写验证码",
        icon: "error",
        duration: 2000,
      });

      return;
    }
    if (!isEmpower) {
      Taro.showToast({
        title: "请同意《隐私权政策》后勾选选框",
        icon: "error",
        duration: 2000,
      });

      return;
    }
    // 请求后端注册
    // const phoneOpenid = myOpenid;
    let plate_number = formData.plate_number;
    if (plate_number[7] && plate_number[7] == "-") {
      plate_number = plate_number.slice(0, 7).replace(/-/g, "");
    }
    // 校验车牌号

    const params = { ...formData, plate_number, openid: registerForm.openid };
    console.log(params, "params");
    // 注册请求
    const keyboardVal = plate_number.slice(0, 7).replace(/-/g, "");
    if (keyboardVal.length == 0) {
      Dialog.open("dialog", {
        content: "车牌号未填写,是否注册?",
        // 确认修改
        onConfirm: () => {
          Dialog.close("dialog");
          ApiRegisterFn(params, plate_number);
        },
        onCancel: () => {
          Dialog.close("dialog");
          setFormData({
            ...formData,
            plate_number: "",
          });
          // 初始化索引
          setIsTxt(true);
        },
      });
    } else if (keyboardVal.length < 7) {
      Dialog.open("dialog", {
        content: "是否使用车牌号:" + plate_number + "?",
        // 确认修改
        onConfirm: () => {
          Dialog.close("dialog");
          ApiRegisterFn(params, plate_number);
        },
        onCancel: () => {
          Dialog.close("dialog");
          setFormData({
            ...formData,
            plate_number: "",
          });
          // 初始化索引
          setIsTxt(true);
        },
      });
    } else {
      ApiRegisterFn(params, plate_number);
    }
  };
  const ApiRegisterFn = (params, plate_number) => {
    console.log(params, plate_number);
    console.log(Object.assign(formData, { plate_number }));
    console.log({ ...formData, plate_number });
    // const res = {
    //   code: 0,
    //   msg: "关联已有账号",
    //   data: "粤A111222",
    // };
    ApiRegister(params)
      .then((res) => {
        if (res.code == 0) {
          // dispatch(
          //   changeUser(
          //     Object.assign(formData, { member_car_plate_number: plate_number })
          //   )
          // );
          dispatch(changeOpenid(registerForm.openid));
          changeShowKey()
          let successTitle;
          if (res.msg == "关联已有账号") {
            successTitle = (
              <View style={{ }}>
                <View>已检测到原手机号{formData.mobile}已注册</View>
                <View>将为您绑定原有会员信息</View>
                <View>您的{res.data}车牌号将获得4小时免费停车权限。</View>
                <View>即将前往主页</View>
              </View>
            );
          } else {
             successTitle =
               formData.plate_number === "" ? (
                 <View style={{  }}>
                   <View>恭喜您已经成功注册成为东进广场会员。</View>
                   <View>前往绑定车牌号,可获得4小时免费停车权限。</View>
                   <View>即将前往主页</View>
                 </View>
               ) : (
                 <View style={{ }}>
                   <View>恭喜您已经成功注册成为东进广场会员。</View>
                   <View>
                     您的{plate_number}车牌号将获得4小时免费停车权限。
                   </View>
                   <View>即将前往主页</View>
                 </View>
               );
          }
           Toast.show("test", {
             msg: successTitle,
             duration: res.msg == "关联已有账号" ? 5.5 : 4.5,
             type: "success",
           });
             setTimeout(
               () => {
                 Taro.reLaunch({
                   url: "/pages/home/index",
                 });
               },
               res.msg == "关联已有账号"  ? 5500 : 4500
             );
         
        } else {
          Taro.showToast({
            title: res.msg,
            icon: "error",
            duration: 2000,
          });
        }
      })
      .catch((error) => {
        Taro.showToast({
          title: error.data.msg || "失败",
          icon: "error",
          duration: 2000,
        });
        // if (error.code == 1) {
        //   Taro.showToast({
        //     title: error.msg,
        //     icon: "error",
        //     duration: 2000,
        //   });
        // } else if (error.code) {
        //   Taro.showToast({
        //     title: error.msg || "失败",
        //     icon: "error",
        //     duration: 2000,
        //   });
        // }
      });
  };
  // 键盘
  const [isTxt, setIsTxt] = useState(true);
  const [showKeyboard, setShowKeyboard] = useState(true); //
  // 输入车牌号 或修改车牌号
  const changeMember = async (val) => {
    // 创建新的 member ，更新 plate_number
    // 更新 member 状态
    handleNameInputChange("plate_number", val);
    // console.log(val, "val");
  };

  const [showTxt, setShowTxt] = useState(false); //
  const changeShowKey = () => {
    setShowTxt(false);
  };

  useEffect(() => {
    setTimeout(() => {
      setIsAgree(true);
    }, 500);
    // 检测是否注册过
    isRegister();
  }, []);
  //

  // 更新界面
  // 挂载页面
  useEffect(() => {
    // console.log(11, formData);
    form.setFieldsValue(formData);
  }, [formData, form]);
  const darkTheme = {
    // nutuiColorPrimary: "#1677ff",
    // nutButtonPrimary: "#1677ff",
    nutuiColorPrimaryStop1: "#1677ff",
    nutuiColorPrimaryStop2: "#1677ff",
  };
  return (
    <View>
      <Toast id="test" />
      <Toast
        msg={state.msg}
        visible={showToast}
        type={state.type}
        onClose={() => {
          SetShowToast(false);
        }}
      />
      <ConfigProvider theme={darkTheme}>
        <Dialog id="dialog" />
      </ConfigProvider>
      <Form
        form={form}
        // initialValues={{ username: "LiSi", age: 20 }}
        initialValues={{ ...formData }}
        divider
        labelPosition="left"
        // onFinish={(values) => {
        //   submitSucceed(values);
        // }}
        // onFinishFailed={(values, errors) => submitFailed(errors)}
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: "请输入姓名" }]}
          onClick={changeShowKey}
        >
          <Input
            placeholder="请输入姓名"
            type="text"
            onChange={(value) => handleNameInputChange("name", value)}
          />
        </Form.Item>
        <Form.Item
          label="性别"
          name="sex"
          rules={[{ required: true, message: "请选择性别" }]}
          onClick={changeShowKey}
        >
          <Radio.Group
            direction="horizontal"
            onChange={(value) => handleNameInputChange("sex", value)}
          >
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="手机号"
          name="mobile"
          // rules={[{ validator: phoneValidator, required: true }]}
          rules={[
            { required: true, message: "" },
            // { validator: valueRangeValidator, message: "手机号无效" },
          ]}
          onClick={changeShowKey}
        >
          <>
            <View className="address">
              <Input
                placeholder="请输入手机号"
                type="number"
                // onBlur={handleMobileBlur}
                value={formData.mobile}
                onChange={(value) => {
                  handleNameInputChange("mobile", value);
                }}
              />
              <View className="box">
                <Button
                  openType="getPhoneNumber"
                  onGetPhoneNumber={getPhoneNumber}
                  size="mini"
                  className="btn"
                >
                  获取手机号
                </Button>
                <span
                  onClick={getPhoneNumber}
                  className="phone_span my-component"
                >
                  获取手机号
                </span>
              </View>
            </View>
            <View
              className="phone"
              style={{ display: phoneStatus ? "block" : "none" }}
            >
              {phoneTip}
            </View>
          </>
        </Form.Item>
        <Form.Item label="验证码" name="captcha" onClick={changeShowKey}>
          <View className="address">
            <Input
              placeholder="请输入验证码"
              type="number"
              value={formData.captcha}
              onChange={(value) => handleNameInputChange("captcha", value)}
            />
            <View className="right my-component">
              <a
                onClick={handleSendCodeClick}
                style={{ display: sendCode ? "none" : "inline-block" }}
              >
                获取验证码
              </a>
              <span style={{ display: sendCode ? "inline-block" : "none" }}>
                {num}s后可重发
              </span>
            </View>
          </View>
        </Form.Item>
        <Form.Item label="车牌号" name="plate_number">
          {/* <Input
            placeholder="请输入车牌号"
            type="text"
            onChange={(value) => {
              handleNameInputChange("plate_number", value);
            }}
          /> */}
          <>
            {/* <div
              style={{
                border: "1px solid #ccc",
                // padding: "3vh",
                // borderRadius: "1vw",
                cursor: "text", // 添加文本样式的鼠标光标
              }}
              contentEditable
              // onClick={()=>setI}
              onInput={(e) => {
                // 对于 contentEditable，你也可以使用 onChange 事件
                const value = e.currentTarget.textContent;
                console.log(e, "e");
                handleNameInputChange("plate_number", value);
              }}
            >
              {formData.plate_number}
            </div> */}
            <View
              style={{
                display: showKeyboard ? "" : "none",
                position: "relative",
                top: "-1vh",
              }}
              onClick={() => setShowTxt(true)}
            >
              {/* <View>{member[0].plate_number}</View> */}
              <Keyboard
                onChange={(newValue) => changeMember(newValue)}
                isShow={false}
                setLicense={formData.plate_number} // 将setLicense函数传递给子组件
                isTxt={isTxt}
                showTxt={showTxt}
              />
            </View>
          </>
        </Form.Item>
      </Form>
      <View style={{ display: "flex", marginTop: "1vh", padding: "0 3.4vw" }}>
        <Checkbox
          className="my-component"
          checked={isEmpower}
          onChange={handleRadioChange}
          style={{
            color: "#37aae1",
            marginRight: "1.5vw",
          }}
        ></Checkbox>
        <View style={{ fontSize: "3.2vw" }}>
          请您在注册会员前点击
          <View
            className="my-component"
            style={{ display: "inline-block" }}
            onClick={() => setIsAgree(!isAgree)}
          >
            《隐私权政策》
          </View>
          并仔细阅读。如您同意
          <View
            className="my-component"
            style={{ display: "inline-block" }}
            onClick={() => setIsAgree(!isAgree)}
          >
            《隐私权政策》
          </View>
          的全部内容,请勾选左侧选框,开始使用我们的服务
        </View>
      </View>
      <Form
        divider
        labelPosition="left"
        // onFinish={(values) => {
        //   submitSucceed(values);
        // }}
        style={{ marginTop: "0vh" }}
        initialValues={{ ...formData }}
        form={form}
        footer={
          <View>
            <Button
              formType="submit"
              style={{
                backgroundColor: !isEmpower ? "hsl(215, 100%, 84%)" : "#1677ff",
                border: !isEmpower ? "none" : "none",
                width: "90vw",
                // height: "7.6vh",
                paddingTop: "3.3vh",
                paddingBottom: "3.3vh",
                fontSize: "4.8vw",
              }}
              block
              color="primary"
              size="large"
              onClick={determine}
            >
              确认并领取会员
            </Button>
          </View>
        }
      ></Form>
      {/* 使用条款和隐私政策 */}
      <View className="bg_position">
        <View className="bg2" style={{ display: isAgree ? "flex" : "none" }}>
          <View className="model">
            <View className="all">
              <View className="title">
                <View className="tip">使用条款和隐私政策</View>
              </View>
              <View className="content_box">
                <View className="content">
                  <PrivacyPolicy></PrivacyPolicy>
                </View>
              </View>
              <View className="tip_box">
                <View className="tip">
                  点击同意即表示你已阅读并同意
                  <View
                    style={{ display: "inline-block" }}
                    className="txt my-component"
                    onClick={() => setIsAgree(!isAgree)}
                  >
                    《东进隐私权政策》
                  </View>
                  如您同意
                  <View
                    style={{ display: "inline-block" }}
                    className="txt my-component"
                    onClick={() => setIsAgree(!isAgree)}
                  >
                    《东进隐私权政策》
                  </View>
                  的全部内容,请点击同意,开始使用我们的服务
                </View>
              </View>
              <View className="btn_box">
                <View className="btn">
                  <View
                    style={{
                      marginRight: "5vw",
                    }}
                  >
                    <Button
                      style={{
                        backgroundColor: "#fff",
                        color: "#000",
                        border: "1px solid #ccc",
                        width: "34vw",
                        fontSize: "4vw",
                      }}
                      block
                      size="large"
                      onClick={noAgree}
                    >
                      不同意
                    </Button>
                  </View>
                  <View>
                    <Button
                      className="my_component_bg"
                      style={{
                        border: "#1677ff",
                        width: "34vw",
                        fontSize: "4vw",
                      }}
                      block
                      color="#1677ff"
                      size="large"
                      onClick={agree}
                    >
                      同意
                    </Button>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default userUi;
